<template>
  <div class="left">
    <div class="headInfo">
      <div class="text">数据源</div>
      <img src="@/assets/newDashboard/箭头.png" alt="" />
    </div>
    <leftOne></leftOne>
    <leftTwo></leftTwo>
    <leftThree></leftThree>
  </div>
</template>

<script>
import leftOne from './leftOne.vue'
import leftTwo from './leftTwo.vue'
import leftThree from './leftThree.vue'
export default {
  name: 'screenLeftIndex',
  components: {
    leftOne,
    leftTwo,
    leftThree
  },

  data() {
    return {}
  },

  mounted() {},

  methods: {}
}
</script>

<style lang="scss" scoped>
.left {
  margin-top: 9vh;
  margin-bottom: 1vh;
  margin-left: 0.3vw;
  width: 25%;
  height: 75vh;
  background-color: rgba(2, 54, 68, 0.8);
  display: flex;
  flex-direction: column;
}
.headInfo {
  margin: 0 auto;
  margin-top: 2vh;
  margin-bottom: -2vh;
  width: 65%;
  height: 4.5vh;
  background-image: url('~@/assets/newDashboard/headInfo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .text {
    text-align: center;
    font-size: 1.25vw;
    font-family: Source Han Sans CN;
    font-weight: 800;
    color: #ffffff;
  }
  img {
    display: block;
    width: 0.8594vw;
    height: 1.0185vh;
    position: absolute;
    top: 50%;
    right: -18%;
    transform: translate(-50%, -50%);
  }
}
</style>
